<template>
  <footer class="footer">
    <!-- 4. 统计任务总数 -->
    <!-- 4.4 使用差值表达式把数据显示到页面上 -->
    <span class="todo-count">剩余<strong>{{allnum}}</strong></span>
    <ul
      class="filters"
      @click="btn"
    >
      <li>
        <a
          :class="{selected:isShow === 'all'}"
          @click="isShow = 'all'"
          href="javascript:;"
        >全部</a>
      </li>
      <li>
        <a
          :class="{selected:isShow === 'no'}"
          @click="isShow = 'no'"
          href="javascript:;"
        >未完成</a>
      </li>
      <li>
        <a
          :class="{selected:isShow === 'yes'}"
          @click="isShow = 'yes'"
          href="javascript:;"
        >已完成</a>
      </li>
    </ul>
    <!-- 6. 清除已完成的任务 -->
    <!-- 6.1 绑定点击事件 -->
    <button
      class="clear-completed"
      @click="clear"
    >清除已完成</button>
  </footer>
</template>

<script>
export default {
  data () {
    return {
      // 5. 数据切换 ,定义一个变量,isShow接受a标签的值
      isShow: 'all' //isShow有三个值 all yes no
    }
  },
  // 4.1父传子 在子组件中props 定义一个数组,接受父组件中list数组的长度
  props: ['farr'],
  // 4.3利用计算属性得出farr的length的长度返回
  computed: {
    allnum () {
      return this.farr.length
    }
  },
  methods: {
    btn () {
      this.$emit('switch', this.isShow)
    },
    clear () {
      this.$emit('clear')
    }
  }
}
</script>